<template>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :append-to-body="true"
        :close-on-click-modal="false">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px"
            style="width: 80%; margin-left:50px;">
            <el-row :gutter="40">
                <el-col :span="24">
                    <el-form-item label="数据源名称" prop="sourceName">
                        <el-select v-model="temp.sourceId" class="filter-item" placeholder="请选择所属数据源名称"
                            @change="choseBelongs">
                            <el-option v-for="(item, index) in sourceData" :key="index" :label="item.sourceName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="表名" prop="tableName">
                        <el-select v-model="temp.tableId" class="filter-item" placeholder="请选择下级表的表名"
                            :disabled="!temp.sourceId">
                            <el-option v-for="(item, index) in tableData" :key="index" :label="item.tableName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
                {{ $t('table.cancel') }}
            </el-button>
            <el-button type="primary" :loading="loading" @click="dialogStatus === 'create' ? createData() : updateData()">
                {{ $t('table.confirm') }}
            </el-button>
        </div>
        <!-- <div class="el-message el-message--error"><p>请填写完整</p></div> -->
    </el-dialog>
</template>
  
<script>
import { getSourceList, getTableList } from '@/api/masterdata/masterdataTable'
import {bindTable} from '@/api/masterdata/bindData'

export default {
    name: 'treeData',
    data() {
        return {
            temp: {
                name: undefined,
                desc: undefined
            },
            textMap: {
                update: '编辑',
                create: '新建'
            },
            rules: {},
            loading: false,
            dialogFormVisible: false,
            dialogStatus: '',
            tableData: [],
            sourceData: [],
        }
    },

    methods: {
        setList() {
            getSourceList().then((res) => {
                if (res.data.code === 200) {
                    this.sourceData = res.data.data
                    console.log(this.sourceData)
                }
            })
        },
        resTemp(){
         this.temp={
         }
        },
        //选择所属数据源
        choseBelongs(id) {
            getTableList({ sourceId: id }).then(res => {
                if (res.data.code === 200) {
                    this.tableData = res.data.data
                }
            })
        },
        handleCreate(id) {
            this.resTemp()
            this.temp.directoryId=id
            this.dialogStatus = 'create'
            // this.temp = data
            this.dialogFormVisible = true
            this.setList()
        },
        createData() {
            this.dialogFormVisible = false
            bindTable(this.temp).then(res=>{
                console.log(res,'绑定表')
                if(res.data.code==0){
                    this.$message.success(res.data.msg)
                    this.$emit('getList')
                }else{
                    this.$message,error(res.data.msg)
                }
                this.dialogFormVisible = false
            })
        },
        handleUpdate(data) {
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.temp = data
        },
        updateData() {
            this.dialogFormVisible = false
            updateMasterdataDirectory(this.temp).then(res => {
                if (res.data.code == 0) {
                    this.$message.success(res.data.msg)
                    this.$emit('getTreeList')
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        }
    }
}
</script>
<style>
.el-dialog {
    width: 40%;
}
</style>

  